<template>
  <div class="login-wrapper">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-form">
      <h3>叩丁狼客户关系管理系统</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入
//import axios from "axios";
//import qs from "qs";//安装axios时  就会自带这个qs
//引入登录api方法
import { LoginApi } from "@/request/api";

export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate(vali => {
        console.log("vali:" + vali);
        if (vali) {
          LoginApi({
            username: this.ruleForm.username,
            password: this.ruleForm.pwd
          }).then(res => {
            //localStorage 不会自动删除，永久保存
            //sessionStorage  关闭浏览器自动清除掉
            if (res.success) {
              localStorage.setItem("token", res.data);
            }
          });
        } else {
          return false;
        }
      });
      //qs.stringify 可以转化成Content-Type: application/x-www-form-urlencoded
      // const data = qs.stringify({
      //   username: this.ruleForm.username,
      //   password: this.ruleForm.pwd
      // });
      // axios.post("/api/coding/tokens", data).then(res => {
      //   console.log(res);
      // });
    }
    // components: {
    // }
  }
};
</script>

<style lang="less">
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #324057;
  .login-form {
    width: 330px;
    height: 210px;
    text-align: center;
    h3 {
      padding-bottom: 15px;
      font-size: 24px;
      color: #fff;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>